<template>
  <a-drawer v-model:open="Detailopen" title="项目详情" width="800" :closable="false" :footer-style="{ textAlign: 'right' }"
    @close="onClose">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="基础配置">
        <div class="detail-table-title">
          <i></i>基本信息
        </div>
        <div>
          <a-form style="margin-bottom: 20px;" :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">
            <div class="topItem">
              <div class="formItem">
                <div class="formTitle">所属项目</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">楼宇编号</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">楼宇名称</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
            </div>
            <div class="topItem">
              <div class="formItem">
                <div class="formTitle">所属地区</div>
                <div style="width: 500ox" >
                  <a-cascader v-model:value="value" :options="Regionoptions" placeholder="Please select" style="width: 490px" />
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">楼宇地址</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
            </div>
            <div class="topItem">
              <div class="formItem">
                <div class="formTitle">产权性质</div>
                <div>
                  <a-select ref="select" v-model:value="value1" style="width: 100%" @focus="focus"
                    @change="handleChange">
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">不动产证编号</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">产权编号</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
            </div>
            <div class="topItem">
              <div class="formItem">
                <div class="formTitle">土地编号</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">排序值</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
            </div>
          </a-form>
        </div>
        <div class="detail-table-title">
          <i></i>楼宇面积
        </div>
        <div>
          <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">
            <div class="topItem">
              <div class="formItem">
                <div class="formTitle">所属项目</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">楼宇编号</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">楼宇名称</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
            </div>
            <div class="topItem">
              <div class="formItem">
                <div class="formTitle">产权性质</div>
                <div>
                  <a-select ref="select" v-model:value="value1" style="width: 100%" @focus="focus"
                    @change="handleChange">
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">不动产证编号</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
              <div class="formItem">
                <div class="formTitle">产权编号</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
            </div>
          </a-form>
        </div>
        <div class="detail-table-title" style="margin-top: 20px;">
          <i></i>默认收支账户
        </div>
        <div>
          <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">
            <div class="topItem">
              <div class="formItem">
                <div class="formTitle">选择账户</div>
                <div>
                  <a-select ref="select" v-model:value="value1" style="width: 100%" @focus="focus"
                    @change="handleChange">
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
                </div>
              </div>
            </div>
          </a-form>
        </div>
      </a-tab-pane>

      <!-- 项目详情里的拓展信息 -->
      <a-tab-pane key="2" tab="拓展信息" force-render>
        <titleBar titleName="拓展信息" />
        <div class="topItem">
          <div class="tuozhangFormItem">
            <div style="display:flex;justify-content: space-between;">
              <div class="formTitle">总楼层</div>
              <div class="formTitle"><a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox></div>
            </div>
            
            <div>
              <a-input v-model:value="formState.username" />
            </div>
          </div>
          <div class="tuozhangFormItem">
            <div class="formTitle">楼宇标签</div>
            <div>
              <a-input v-model:value="formState.username" />
            </div>
          </div>
        </div>
        <div class="tuozhang-image">
          <div class="tuozhang-title">图片</div>
          <a-upload
          v-model:file-list="fileList"
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>
          <div class="tuozhang-title">设备支持</div>
          <div>
            <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
            <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
            <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
            <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
            <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
            <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
            <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
            <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
          </div>
          <div class="tuozhang-title">楼宇介绍</div>

        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="营收目标">
        <div class="addTarget" style=""><a-button type="primary"><span style="margin-right:5px;">+</span>添加目标</a-button></div>
        <a-table :dataSource="addDataSource" :columns="addColumns" bordered/>
      </a-tab-pane>
    </a-tabs>


    <template #footer>
      <!-- <a-button style="margin-right: 6px" @click="onClose" disabled>上一项</a-button>
      <a-button style="margin-right: 556px" @click="onClose">下一项</a-button> -->
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onClose">提交</a-button>
    </template>
  </a-drawer>
  <a-drawer v-model:open="open" class="custom-class" width="800" root-class-name="root-class-name"
    :root-style="{ color: 'blue' }" style="color: red" title="项目常用电话" placement="right"
    @after-open-change="afterOpenChange">
    <a-tag color="processing" closable style="height: 50px; line-height: 50px; width: 100%; font-size: 14px" @close="log">
      将展示在用户移动端的"常用电话"页面。如果项目不使用用户移动端，则无需添加。
    </a-tag>
    <a-button type="primary" style="margin-top: 20px; margin-bottom: 20px">
      添加分类
    </a-button>
    <a-table :columns="telcolumns" :data-source="teldata" bordered>
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a>{{ text }}</a>
        </template>
      </template>
    </a-table>
  </a-drawer>
  <a-table :columns="columns" :data-source="data" :scroll="{ x: 1900, y: 300 }">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          楼宇名称
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        {{ record.name }}
      </template>
      <template v-if="column.key === 'tel'">
        <a @click="showDrawer">查看</a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag v-for="tag in record.tags" :key="tag" :color="tag === 'loser'
            ? 'volcano'
            : tag.length > 5
              ? 'geekblue'
              : 'green'
            ">
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a @click="showDetailDrawer" style="margin-right: 10px;">编辑</a>
          <a @click="showDetailDrawer">楼层管理</a>
          <a style="color: red; margin-left: 10px" @click="showConfirm">删除</a>
          <down-outlined />
        </span>
      </template>
    </template>
  </a-table>
</template>
<script>
import titleBar from './titleBar.vue'
  export default {
    name: 'index',
    components: { titleBar },
  }
</script>
<script setup>
import { ref } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import { reactive } from 'vue';
import { message } from 'ant-design-vue';
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
const fileList = ref([]);
const loading = ref(false);
const imageUrl = ref('');
const handleChange = info => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    getBase64(info.file.originFileObj, base64Url => {
      imageUrl.value = base64Url;
      loading.value = false;
    });
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
};
const beforeUpload = file => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

const Regionoptions = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];



const formState = reactive({
  username: '',
  password: '',
  remember: true,
});
const onFinish = values => {
  console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

const Detailopen = ref(false);

const showDetailDrawer = () => {
  Detailopen.value = true;
};
const onClose = () => {
  Detailopen.value = false;
};

const telcolumns = [
  {
    title: '分类名称',
    dataIndex: 'name',
  },
  {
    title: '电话',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: '排序',
    dataIndex: 'address',
  },
  {
    title: '状态',
    dataIndex: 'address',
  },
  {
    title: '操作',
    dataIndex: 'address',
  },
]
const teldata = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
]

const showConfirm = () => {
  Modal.confirm({
    title: 'Do you want to delete these items?',
    icon: createVNode(ExclamationCircleOutlined),
    content:
      'When clicked the OK button, this dialog will be closed after 1 second',
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
      }).catch(() => console.log('Oops errors!'))
    },
    onCancel() { },
  })
}
const log = (e) => {
  console.log(e)
}
const open = ref(false)
const afterOpenChange = (bool) => {
  console.log('open', bool)
}
const showDrawer = () => {
  open.value = true
}
const columns = [
  {
    name: '楼宇名称',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    fixed: 'left',
  },
  {
    title: '所属项目',
    dataIndex: 'age',
    width: 150,

    key: 'age',
  },
  {
    title: '楼宇编号',
    dataIndex: 'zhaoshang',
    width: 150,

    key: 'zhaoshang',
  },
  {
    title: '楼宇标签',
    key: 'fangyuan',
    width: 150,

    dataIndex: 'fangyuan',
  },
  {
    title: '建筑面积（㎡）',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '可租面积	',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '管理面积（㎡）	',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '房间总数（间）	',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '出租率（%）	',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '在租面积（㎡）',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '在租合同数（份）',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
  },
]
const data = [
  {
    key: '1',
    name: '项目2',
    age: 32,
    tel: 122121,
    zhaoshang: 21,
    fangyuan: 0,
    kefangyuan: 0,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
]
</script>
<style lang="less" scoped>

.addTarget{
  display: flex;
  width: 100%;
  justify-content: flex-end;

}
.tuozhang-title{
  margin-top: 20px;
}
.tuozhangFormItem{
  width: 360px;

    .formTitle {
      margin-bottom: 10px;
    }
}
.topItem {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  .formItem {
    width: 240px;

    .formTitle {
      margin-bottom: 10px;
    }
  }
}

.detail-table-title {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  i {
    display: inline-block;
    width: 5px;
    height: 12px;
    margin-right: 5px;
    background-color: #2681f3;
  }
}

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>